import React from "react";
import {
  PullToRefresh,
  ListView,
  Carousel,
  SwipeAction,
  Button
} from "antd-mobile";
import axios from "axios";

axios.defaults.baseURL = '/app'
axios.defaults.headers.post['Content-Type'] = 'application/json';
const url = "/banner/user/1";
// const url = "https://5b5e71c98e9f160014b88cc9.mockapi.io/app/v1/lists";
 class Carou extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data:props.data,
      menuId:props.menuId,
      pname:props.pname,
      slideIndex: '',
      imgHeight: 400
    }
  }
//{`../#/s2?pid=${this.state.menuId}`}
  render() {
    return (
      <Carousel className="space-carousel"
      frameOverflow="visible"
      cellSpacing={10}
      slideWidth={0.8}
      autoplay
      infinite
      beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
      afterChange={index => this.setState({ slideIndex: index })}
      >
        {this.state.data.map((ii, index) => (
          <a
            key={ii}
            href={`../#/s2?pid=${this.state.menuId}&pname=${this.state.pname}`}
            style={{
              display: 'block',
              position: 'relative',
              top: this.state.slideIndex === index ? -10 : 0,
              height: this.state.imgHeight,
              boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
            }}
          >
            {/* delFolder = (name,e)=>{
              alert(name)

            } */}
            <img
              src={ii.imgUrl}
              alt={ii.title}
              style={{ width: "100%", verticalAlign: "top" }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event("resize"));
                this.setState({ imgHeight: "auto" });
              }}
            />
          </a>
        ))}
      </Carousel>
    );
    componentWillReceiveProps = (props) =>{
      this.setState({
        data:props.data,
        menuId:props.menuId
      })
    }
  }
}


export default class Banner extends React.Component {
  constructor(props) {
    super(props);

    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    });

    this.state = {
      dataSource: dataSource.cloneWithRows([]),
      refreshing: false,
      isLoading: true,
      users: []
    };
  }
  componentWillMount() {
    clearInterval();
    console.log('banner');
    console.log(this.props);
    const _this = this;
    // this.props.changeTitle("琦长老的space");
    console.log("before render");
    axios.get(url).then(res => {
      console.log(res.data);
      this.getList = res.data.data;
      console.log(this.getList);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.getList),
        isLoading: false,
        users: this.getList
      });
    });
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderFooter={() => (
          <div style={{ padding: 30, textAlign: "center" }}>
            {this.state.isLoading ? "Loading..." : "别拉了...真到底了..."}
          </div>
        )}
        renderRow={(rowData, sectionID, rowID) => {
          let index = 1;
          let obj;
          if (index < 0) {
            index = initData.length - 1;
          }
          if (this.users) {
            obj = this.users[index--];
          }
          return (
            <div key={rowID} style={{ padding: 10 }}>
              <h3 style={{ textAlign: "center" }}>{rowData.title}</h3>
              {<Carou data={rowData.sliders} menuId={rowData.menuId} pname={rowData.title} />}
              {<SwipeAction />}
              <console className="log">{obj}</console>
              {rowData.key === "1" ? (
                <div style={{ padding: 40, backgroundColor: "#f1f1f1" }}>
                  drag left
                </div>
              ) : (
                ""
              )}
              <console className="log">{this.users}</console>
            </div>
          );
        }}
        renderSeparator={(sectionID, rowID) => (
          <div
            key={`${sectionID}-${rowID}`}
            style={{ backgroundColor: "#F5F5F9", height: 8 }}
          />
        )}
        initialListSize={10}
        pageSize={5}
        scrollRenderAheadDistance={200}
        scrollEventThrottle={20}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
        style={{
          height: document.body.clientHeight
        }}
        contentContainerStyle={{ position: "relative" }}
        scrollerOptions={{ scrollbars: true }}
        pullToRefresh={
          <PullToRefresh
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
          />
        }
      />
    );
  }
}
